<template>
  <div class="setbindsns">
    <div class="setbindsns-header">
      <p>账号信息</p>
      <p class="header-complete">
        完成 <span>{{ finish }}/4</span>
      </p>
    </div>
    <div class="setbindsns-container">
      <div class="setbindsns-item">
        <div class="item-img">
          <img src="/image/user/phone.png" alt="" />
        </div>
        <div class="item-center">
          <p class="item-phone">
            <span>手机</span>
            未绑定
          </p>
          <p>可用手机号加密登录在线网校，可通过手机号找回密码</p>
        </div>
        <div class="item-btn" @click="changePhone">修改绑定</div>
      </div>
      <div class="setbindsns-item">
        <div class="item-img">
          <img src="/image/user/pwd.png" alt="" />
        </div>
        <div class="item-center">
          <p class="item-phone"><span>密码</span></p>
          <p>用于保护账号信息和登录安全</p>
        </div>
        <div class="item-btn">修改密码</div>
      </div>
      <div class="setbindsns-item">
        <div class="item-img">
          <img src="/image/user/mime.png" alt="" />
        </div>
        <div class="item-center">
          <p class="item-phone"><span>用户名</span></p>
          <p>可用用户名加密码登录在线网校</p>
        </div>
        <div class="item-btn" v-if="!userInfo.username">
          绑定用户
        </div>
      </div>
      <div class="setbindsns-item">
        <div class="item-img">
          <img src="/image/user/email.png" alt="" />
        </div>
        <div class="item-center">
          <p class="item-phone"><span>邮箱</span> 未绑定</p>
          <p>可用邮箱加密登录在线网校，可用邮箱找回密码</p>
        </div>
        <div class="item-btn">绑定邮箱</div>
      </div>
    </div>

    <!--    修改手机号-->
    <el-dialog title="修改手机号" :visible.sync="phoneOpen" width="500px" before-close="">
      <div class="phoneDialog">
        <div class="tip">
          为保障您的账号安全和收费课程的正常学习，小鹿希望您能为帐号绑定手机号，更换手机号后请及时换绑。（1个手机号只能绑定1个小鹿线帐号）
        </div>
        <el-form ref="phoneForm" :model="phoneForm" label-width="80px" :rules="phoneRules">
          <el-form-item label="手机号" prop="mobile">
            <el-col :span="24">
              <el-input v-model="phoneForm.mobile" placeholder="请输入手机号"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="验证码" prop="captcha">
            <el-row>
              <el-col :span="16">
                <el-input v-model="phoneForm.captcha" placeholder="请输入验证码"
                  @keyup.enter.native="onPhoneSubmit('phoneForm')"></el-input>
              </el-col>
              <el-col :span="8">
                <el-button class="sendCode" @click="showVerify('phoneForm')">{{
                captcha
                }}</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="24">
                <el-button type="primary" @click="onPhoneSubmit('phoneForm')" class="phoneSubmit">确认</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!--  修改密码对话框  -->
    <el-dialog title="修改密码" :visible.sync="pswOpen" width="400px" before-close="">
      <div>
        <el-form ref="pswForm" :model="pswForm" label-width="80px" :rules="pswRules">
          <el-form-item label="旧密码" prop="oldPwd">
            <el-input show-password v-model="pswForm.oldPwd" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="password">
            <el-input show-password v-model="pswForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="repassword">
            <el-input show-password v-model="pswForm.repassword" placeholder="请输入密码"
              @keyup.enter.native="onPswSubmit('pswForm')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="24">
                <el-button type="primary" @click="onPswSubmit('pswForm')" class="changepass">确认</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!--  修改用户名  -->
    <el-dialog title="修改用户名" :visible.sync="usernameOpen" width="400px" before-close="handleUsernameClose">
      <div class="username-dialog">
        <p></p>
        <el-form ref="userForm" :model="userForm" label-width="80px" :rules="userRules">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input show-password v-model="userForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="repassword">
            <el-input show-password v-model="userForm.repassword" placeholder="请输入再次密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="24">
                <el-button type="primary" @click="onUserSubmit('userForm')" class="changepass">确认</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!--    行为验证-->
    <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{ width: '400px', height: '200px' }"
      @success="success" @error="error" />
  </div>
</template>

<script>
import { sendModifyMobileCaptcha } from "@/common/api/sms";
import Verify from "@/components/verifition/Verify";  //行为校验
import {
  modifyMobile,
  createToken,
  getInfo,
  logout,
  modifyPassword,
  modifyUsername,
} from "@/common/api/auth";
import { Encrypt } from "@/utils/aes.js";
import { mapState, mapActions, mapMutations } from "vuex";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      crtType: "changePhone",
      phoneOpen: false, // 修改手机号对话框
      phoneForm: {}, // 修改手机号表单
      phoneRules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "目前只支持中国大陆的手机号码",
          },
        ],
        captcha: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
      sendTimer: null, // 修改手机号 发送
      captcha: "发送验证码",
      pswOpen: false, // 修改密码
      pswForm: {},
      pswRules: {
        oldPwd: [
          {
            required: true,
            message: "请输入旧密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
        repassword: [
          {
            required: true,
            message: "请输入确认密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
      usernameOpen: false, // 修改用户名
      userForm: {},
      userRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
        repassword: [
          {
            required: true,
            message: "请输入确认密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState({   // vuxx的数据
      userInfo: (state) => state.user.userInfo,
    }),
    finish() {   // 已完成  3/4
      let num = 0;
      if (this.userInfo.mobile) {
        num += 1;
      }
      if (this.userInfo.username) {
        num += 1;
      }
      if (this.userInfo.password) {
        num += 1;
      }
      if (this.userInfo.email) {
        num += 1;
      }
      return num;
    },
  },
  components: {
    Verify,
  },
  methods: {
    ...mapActions(["saveUserInfoAction"]),

    // 修改手机号绑定
    changePhone() {
      this.phoneOpen = true
      this.phoneForm = {}   // 输入框置为空
      this.crtType = 'changePhone'
    },
    // 修改手机号行为校验
    showVerify(phoneForm) {
      if (this.phoneForm) {   // 
        this.$refs.verify.show()  // 显示行为校验
      }
    },
    success(e) {
      this.phoneForm.captchaVerification = e.captchaVerification
      this.sencodes()  // 发送验证码方法
      // console.log(e);
    },
    error() {
      console.log('失败');
    },
    // 请求手机号验证码
    sencodes() {
      let reg = /^1[3456789]\d{9}$/
      if (!reg.test(this.phoneForm.mobile)) {  // 如果手机号不对，！取反
        this.$message({
          type: 'error',
          message: '手机号码错误，请重新输入'
        })
      } else {
        if (this.phoneForm.mobile) {
          let mobile = Encrypt(this.phoneForm.mobile)  // 手机号码加密
          // 发送请求
          // console.log(1111111);
          this.sendCode(mobile)  // 传手机号码参数
          // 修改按钮的文字，多少秒后重新发送
        }
      }
    },
    // 发送验证码请求
    sendCode(mobile) {
      sendModifyMobileCaptcha({ mobile }).then(res => {
        // console.log(res, '验证码');
        if (res.meta.code == '200') {
          this.$message({
            type: 'success',
            message: '发送成功'
          })
        }
      })
    },
    //确认修改手机号码
    onPhoneSubmit(phoneForm) {
      this.$refs[phoneForm].validate(valid => {
        if (valid) {
          if (this.phoneForm.mobile) {  // 加载
            var phoneloading = Loading.service({
              lock: true,
              text: 'Loading...',
              spinner: 'el-icon-loading',
              background: 'rgba(0,0,0,.7)'
            })
            let userId = this.userInfo.id
            let mobile = Encrypt(this.phoneForm.mobile)
            let captcha = this.phoneForm.captcha
            let captchaVerification = this.phoneForm.captchaVerification
            createToken().then(res => {  // token接口
              let tokens = res.data.token
              modifyMobile({  // 修改手机号接口
                token: tokens,
                userId: userId,
                mobile: mobile,
                captcha: captcha,
                captchaVerification: captchaVerification
              }).then(res => {
                // console.log(res,'修改手机号码成功？');
                if (res.mate.code == '200') {
                  this.$message({
                    type: 'success',
                    message: '修改成功,重新登录'
                  })
                  // 关闭loading
                  phoneloading.close()
                  // 退出登录
                  this.goLogout()
                  // 关闭对话框
                  this.phoneOpen = false
                }
              })
            })

          }
        }
      })
    },



  },
};
</script>

<style scoped>
.changepass {
  margin-left: 200px;
}

.phoneSubmit {
  margin-left: 300px;
}

.sendCode {
  width: 100%;
  border: none;
}

.phoneDialog .tip {
  width: 400px;
  margin: 0 auto 20px;
}

.setbindsns {
  width: 1000px;
  height: 700px;
  padding-top: 20px;
}

.setbindsns-header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  display: flex;
}

.header-complete {
  margin-left: 40px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(161, 153, 159, 1);
}

.header-complete span {
  color: #ff1626;
}

.setbindsns-container {
  width: 100%;
  height: 700px;
}

.setbindsns-item {
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  height: 90px;
  width: 100%;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  border-top: 1px solid rgba(112, 112, 112, 0.3);
}

.item-img {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-img img {
  width: 28px;
  height: 40px;
}

.item-phone {
  color: #ff1626;
  margin-bottom: 5px;
}

.item-phone span {
  font-weight: 700;
  font-size: 18px;
  color: #333333;
  margin-right: 5px;
}

.item-center {
  width: 800px;
}

.item-btn {
  padding: 5px 20px;
  border: 1px solid rgba(112, 112, 112, 1);
  border-radius: 15px;
  cursor: pointer;
}
</style>
